<template>
  <div class="purchased">
    <Header
      :cusTitle="`已购买 <span style='color:rgb(255, 36, 54);'>${purchasedNum || ''}</span> 只个股`"
    />
    <Table :list="list" />
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/common/Header.vue';
import Table from '@/components/purchased/Table.vue';
import { computed, onMounted } from 'vue';
import useGetPurchased from '@/hooks/useGetPurchased';
const { getPurchasedList, list } = useGetPurchased('Purchased中的index.vue');
const purchasedNum = computed(() => list.value.filter(item => item.hasAuth).length);

onMounted(() => {
  getPurchasedList();
});
</script>

<style scoped lang="less">
.purchased {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  background-color: var(--bg-color-2);
}
</style>
